<template>
  <view class="address-container">
    <!-- 选择收货地址 -->
    <view class="address-choose" v-if="addressInfoStr === '{}'">
      <button type="primary" size="mini" @click="chooseAddress">请选择收货地址+</button>
    </view>
    <!-- 收货信息 -->
    <view class="address-info" v-else @click="chooseAddress">
      <view class="address-row1">
        <view class="row1-left">
          <view class="username">
            收货人：{{address.userName}}
          </view>
        </view>
        <view class="row1-right">
          <view class="phone">
            电话：{{address.telNumber}}
          </view>
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>

      </view>
      <view class="address-row2">
        <view class="row2-left">
          收货地址：
        </view>
        <view class="row2-right">
          {{addressStr}}
        </view>
      </view>
    </view>
    <!-- 底部边框线 -->
    <img src="/static/cart_border@2x.png" class="address-bottom">
  </view>
  </view>
</template>
<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from "vuex";
  export default {
    computed: {
      ...mapState("m_user", ["address"]),
      addressInfoStr() {
        return JSON.stringify(this.address)
      },
      ...mapGetters("m_user", ["addressStr"])
    },
    data() {
      return {
        // address: {},
      }
    },
    methods: {
      ...mapMutations("m_user", ["updateAddress"]),
      // 选择地址
      async chooseAddress() {
        const [err, succ] = await uni.chooseAddress().catch(err => err)
        if (err === null && succ.errMsg === "chooseAddress:ok") {
          // this.address = succ
          this.updateAddress(succ)
        };

        if (err && (err.errMsg === "chooseAddress:fail auth deny" || err.errMsg ===
            "chooseAddress:fail authorize no response")) {
          this.reAuth()
        }
      },
      // 获取地址权限弹出框
      async reAuth() {
        const [err2, confirmResult] = await uni.showModal({
          content: "是否允许获取地址权限？",
          confirmText: "确认",
          cancelText: "取消"
        });
        if (err2) return;
        if (confirmResult.cancle) return;
        if (confirmResult.confirm) return uni.openSetting({
          success: (settingResult) => {
            if (!settingResult.authSetting["scope.address"]) return uni.$showMsg("您取消了授权");
            if (settingResult.authSetting["scope.address"]) return uni.$showMsg("授权成功")
          }
        })
      }
    },
  }
</script>
<style lang="scss">
  .address-container {
    .address-choose {
      height: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .address-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 12px;
      height: 90px;
      padding: 0 5px;

      .address-row1 {
        display: flex;
        justify-content: space-between;

        .row1-left {
          white-space: nowrap;
        }

        .row1-right {
          display: flex;
          flex: 1;
          margin-left: 10px;
          justify-content: space-between;
        }
      }

      .address-row2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;

        .row2-left {
          white-space: nowrap;
        }

        .row2-right {
          flex: 1;
        }
      }
    }

    .address-bottom {
      display: block;
      width: 100%;
      height: 5px;
    }
  }
</style>